import React from 'react'

// import './index.scss'

import styles from './index.module.css'

import NavHeader from '@/components/NavHeader'

// 导入 HouseItem 组件
import HouseItem from '@/components/HouseItem'

// import axios from 'axios'
import API from '../../utils/api'

import { Link } from 'react-router-dom'

import { BASE_URL } from '../../utils/url'

import { Toast } from 'antd-mobile';

const {BMap} = window

// 覆盖物样式
const labelStyle = {
    cursor: 'pointer',
    border: '0px solid rgb(255, 0, 0)',
    padding: '0px',
    whiteSpace: 'nowrap',
    fontSize: '12px',
    color: 'rgb(255, 255, 255)',
    textAlign: 'center'
  }


export default class Map extends React.Component{
    constructor(){
        super()
        this.state={
            //小区下的房源列表
            houseList: [],
            //是否展示房源列表
            isShowList: false,
        }
    }
    componentDidMount(){
        this.initMap()
    }
    initMap(){
            //获取当前定位城市
            const { label,value }= JSON.parse(localStorage.getItem('hkzf_city')||'{}')
            //初始化地图实例
            //在react脚手架中全局对象需要使用window来访问否则会造成Eslint校验错误
            const map = new BMap.Map('container')
            //作用可以在其他方法中通过this来获取到地图对象
            this.map=map
            var myGeo = new BMap.Geocoder();      
            // 将地址解析结果显示在地图上，并调整地图视野    
            myGeo.getPoint(label, async point=>{      
                if (point) {     
                    //初始化地图 
                    map.centerAndZoom(point, 11);      
                    // map.addOverlay(new BMap.Marker(point));      
                    //添加常用控件
                    map.addControl(new BMap.NavigationControl())
                    map.addControl(new BMap.ScaleControl())
                    map.addControl(new BMap.OverviewMapControl())
                    map.addControl(new BMap.GeolocationControl())
                    //调用renderOverlays
                    this.renderOverlays(value)
                }
            }, 
        label
        )
        //给地图绑定移动事件
        map.addEventListener('movestart',()=>{
            console.log('movestart')
            if(this.state.isShowList){
                this.setState({
                    isShowList: false
                })
            }
        })
    }
    //渲染覆盖物入口
    //1.接受区域id参数，获取该区域下的房源数据
    //2.获取房源类型以及下级地图缩放级别
    async renderOverlays(id){
        try{
            Toast.loading('加载中...',0,null,false)
            const {data: res} = await API.get(`/area/map?id=${id}`)
            Toast.hide()
            //调用getTypeAndZoom方法来获取级别和类型
            const {nextZoom,type}=this.getTypeAndZoom()
            res.body.forEach(item=>{
                //创建覆盖物
                this.createOverlays(item,nextZoom,type)
            })
        }catch(e){
            Toast.hide()
        }
    }

    //计算要绘制的覆盖物类型和下一个缩放级别
    // 区 => 11 ,范围>=10 <12
    // 镇 => 13 ,范围>=12 <14
    // 小区 => 15 ,范围>=14 <16
    getTypeAndZoom(){
        //调用地图的getZoom方法,来获取当前的缩放级别
        const zoom=this.map.getZoom()
        let nextZoom, type
        if(zoom>=10&&zoom<12){
            //区

            //下一个缩放级别
            nextZoom=13
            //circle表示绘制圆形覆盖物
            type='circle'
        }else if(zoom>=12&&zoom<14){
            //镇
            nextZoom=15
            type='circle'
        }else if(zoom>=14&&zoom<16){
            //小
            type='rect'
        }
        return {
            nextZoom,
            type
        }
    }

    //创建覆盖物
    createOverlays(data,zoom,type){
        const { 
            coord: {latitude, longitude}, 
            label: areaName,
            count, 
            value 
        } = data 
        //创建坐标对象
        const areaPoint = new BMap.Point(longitude,latitude)
            if(type==='circle'){
                //区或镇
                this.createCircle(areaPoint, areaName, count, value, zoom)
            }else{
            //小区
                this.createRect(areaPoint, areaName, count, value)
            }
    }

    //根据传入的数据创建覆盖物，绑定事件（放大地图，清除覆盖物，渲染下一级房源数据）
    createCircle(point, name, count, id, zoom) {
        const {map}=this
        const opts={
            position: point,
            offset: new BMap.Size(-35,-35)
        }
        //设置setContent后，第一个参数中的文本内容就失效了
        const label=new BMap.Label('',opts)
        
        //给label对象添加一个唯一标识 
        label.id = id

        //设置房源覆盖物的内容
        label.setContent(`
            <div class="${styles.bubble}">
                <p class="${styles.name}">${name}</p>
                <p>${count}套</p>
            </div>
        `)

        //设置样式
        label.setStyles(labelStyle)
        
        //添加单击事件
        label.addEventListener('click',()=>{
            //调用renderOverlays,获取该区域下的房源数据
            this.renderOverlays(id)
            //放大地图，以当前点击的覆盖物为中心放大地图
            //第一个参数: 坐标对象
            //第二个参数: 放大级别
            map.centerAndZoom(point, zoom)
            //清除当前覆盖物信息,设置定时器解决百度APIjs文件报错
            setTimeout(()=>{
                map.clearOverlays()
            },0)
        })
    
        //添加覆盖物到地图中
        map.addOverlay(label)
    }

    //根据传入的数据创建覆盖物，绑定事件（移动地图，渲染房源列表）
    createRect(point, name, count, id){
        const {map}=this
        const opts={
            position: point,
            offset: new BMap.Size(-50,-28)
        }
        //设置setContent后，第一个参数中的文本内容就失效了
        const label=new BMap.Label('',opts)
        
        //给label对象添加一个唯一标识 
        label.id = id

        // 设置房源覆盖物内容
        label.setContent(`
            <div class="${styles.rect}">
                <span class="${styles.housename}">${name}</span>
                <span class="${styles.housenum}">${count}套</span>
                <i class="${styles.arrow}"></i>
            </div>
        `)
        //设置样式
        label.setStyles(labelStyle)
        
        //添加单击事件
        label.addEventListener('click',(e)=>{
            // 5 调用地图 panBy() 方法，移动地图到中间位置。
            // 公式：
            //   垂直位移：(window.innerHeight - 330) / 2 - target.clientY
            //   水平平移：window.innerWidth / 2 - target.clientX
            // 6 监听地图 movestart 事件，在地图移动时隐藏房源列表。
            const target = e.changedTouches[0]
            this.map.panBy(window.innerWidth / 2 - target.clientX,(window.innerHeight - 330) / 2 - target.clientY)
            this.getHouseList(id)
        })
    
        //添加覆盖物到地图中
        map.addOverlay(label)
    }

    //获取小区房源数据
    async getHouseList(id){
        try{
            Toast.loading('加载中...',0,null,false)
            const {data: res} = await API.get(`/houses?cityId=${id}`)
            Toast.hide()
            this.setState({
                houseList: res.body.list,
                isShowList: true
            })
        }catch(e){
            Toast.hide()
        }
    }

    //封装渲染房屋列表数据的方法
    renderHousesList(){
        return this.state.houseList.map(item => (
        <HouseItem
            key={item.houseCode}
            src={BASE_URL + item.houseImg}
            title={item.title}
            desc={item.desc}
            tags={item.tags}
            price={item.price}
        />
        ))
        // return (
        //     this.state.houseList.map(item => (
        //         <div className={styles.house} key={item.houseCode}>
        //             <div className={styles.imgWrap}>
        //             <img
        //                 className={styles.img}
        //                 src={BASE_URL+item.houseImg}
        //                 alt=""
        //             />
        //             </div>
        //             <div className={styles.content}>
        //             <h3 className={styles.title}>{item.title}</h3>
        //             <div className={styles.desc}>{item.desc}</div>
        //             <div>
        //                 {item.tags.map((tag,index) => {
        //                     const tagClass = 'tag'+(index+1)
        //                     return (
        //                         <span
        //                             className={[styles.tag, styles[tagClass]].join(' ')}
        //                             key={tag}
        //                         >
        //                             {tag}
        //                         </span>
        //                     )
        //                 })}
        //             </div>
        //             <div className={styles.price}>
        //                 <span className={styles.priceNum}>{item.price}</span> 元/月
        //             </div>
        //             </div>
        //         </div>
        //     ))
        // )
    }

    render(){
        console.log(111);
        return (
            <div className={styles.map}>
                {/* 头部导航 */}
                <NavHeader>
                    地图找房
                </NavHeader>
                {/* 地图容器元素 */}
                <div id="container" className={styles.container}></div>
                 {/* 房源列表 */}
                {/* 添加 styles.show 展示房屋列表 */}
                {/* <div
                    className={[
                        styles.houseList,
                        this.state.isShowList ? styles.show : ''
                    ].join(' ')}
                > */}
                <div className={[styles.houseList,this.state.isShowList?styles.show:''].join(' ')}>
                    <div className={styles.titleWrap}>
                        <h1 className={styles.listTitle}>房屋列表</h1>
                        <Link className={styles.titleMore} to="/home/list">
                        更多房源
                        </Link>
                    </div>

                    <div className={styles.houseItems}>
                        {/* 房屋结构 */}
                        {this.renderHousesList()}
                    </div>
                </div>
            </div>
        )
    }
}


